<template>
  <div class="content-container"  v-loading="loading"
       element-loading-text="加载中"
       element-loading-spinner="el-icon-loading" style="height: calc(100vh - 60px);background-color: rgba(200,200,200,0.2)">
    <div class="list">
      <div class="list-item"  v-for="(item,index) in courseData" :key="index"  @click="$router.push({path:'/course-detail',query:{kcxh00:item.kcxh00,pxjgxh:item.pxjgxh}})">
        <div class="content">
          <div class="picture">
            <img :src="item.kcfmwj" />
          </div>
          <div class="desc">
            <div class="kcmc00">
              {{item.kcmc00}}
            </div>
            <div class="kcjg00">
             <span style="color: #000">培训费用：</span> {{item.kcjg00}}元
            </div>
            <div class="kclbmc">
              <span style="margin-left: 10px; border-radius: 4px; background-color: #00A8E8;padding: 5px">{{item.kclbmc}}</span>
              <span style="margin-left: 10px; border-radius: 4px; background-color: #3191fe;padding: 5px">{{dict.kklx00[item.kklx00]}}</span>
            </div>
            <div class="kcyq00" v-html="item.kcyq00">

            </div>
          </div>
       </div>
        <div class="footer">
          <div class="pxjgmc">{{item.pxjgmc}}</div><div class=""></div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import ReturnBtn from "@/views/components/ReturnBtn.vue";
import {skillsTrainingApi} from "@/api";
export default {
  name:"course-list",
  components:{
    ReturnBtn
  },
  data(){
    return {
      loading:false,
      page:1,
      size:15,
      pageTimer:null,
      dict:{
        kklx00:{
          "1":"随到随学",
          "2":"周末可"

        }
      },
      courseData:[]
    }
  },
  mounted() {
    this.queryCourse()
  },
  methods: {
    queryCourse(){
      this.loading=true


      this.pageTimer=setInterval(()=>{
        if( this.nomoreLoading ){
          return
        }
        skillsTrainingApi.queryCourse({page:this.page,limit:this.size}).then((res)=>{
          this.page++
          this.courseData = this.courseData.concat(res.data.records)
          if (this.courseData.length >= res.data.total){
            this.nomoreLoading = true
            clearInterval(this.pageTimer)
          }
        }).catch(()=>{
          this.error = true
        }).finally(()=>{
          this.loading = false
        })
      },500)
    }


  }
}
</script>
<style lang="scss" scoped>
  .list{
       width: 85%;
       margin-left: auto;
       margin-right: auto;
       display: flex;
      flex-flow:row wrap;

    .list-item{
        border-radius: 16px;
        margin-top: 30px;
        margin-left: 40px;
        width: 700px;
        height: 380px;
        background-color: rgba(255,255,255,0.7);
        .content{
          margin-top: 10px;
          height: 320px;
          width: 100%;
         display: flex;
        .picture{
          width: 320px;
          height: 320px;
          img{
            margin-top: 10px;
            margin-left: 10px;
            width: 300px;
            height: 300px;
          }
        }
        .desc{
          flex: 1;
          height: 100%;
          .kcmc00{
            padding: 5px;
            text-align: left;
            font-weight: bold;
            font-size: 30px;
            color: #2c3e50;
          }
          .kcjg00{
            padding: 5px;
            text-align: left;
            font-weight: bold;
            font-size: 30px;
            color: #ff0000;
          }
          .kclbmc{
            font-size: 25px;
            margin-top: 20px;
            text-align: left;
            font-weight: bold;
          }
          .kcyq00{
            text-align: left;
            margin-top: 20px;
            padding: 10px;
            font-weight: bold;
            height: 135px;
          }
        }
      }
        .footer{
          display: flex;
          width: 95%;
          margin-left: auto;
          margin-right: auto;
          border-top: 1px solid #2274A5;
          height: 40px;
          line-height: 40px;
          font-weight: bold;
          font-size: 25px;
          text-align: left;
          .pxjgmc{

          }


        }
      }

  }
</style>
